<template>
  <div class="live-small-card" :class="{ active: isActive }" @mouseover="handleHover(true)" @mouseleave="handleHover(false)">
    <div class="flag">
      <div class="tag" :class="{ red: status==0 || status==1 }"></div>
    </div>
    <div class="time">{{status==0 ? formatLiveTime(startTime) : (status==1 ? "正在直播" : "直播已结束")}}</div>
    <div v-if="status==1" class="pic">
      <a :href="liveUrl" target="_blank">
        <img crossorigin="anonymous" :src="liveImg" />
      </a>
    </div>
    <div v-else class="pic">
      <img crossorigin="anonymous" :src="liveImg" />
    </div>
    <div class="info">
      <div class="name" :title="liveTitle">{{liveTitle}}</div>
      <div class="expert">讲师：{{expertName}}</div>
    </div>
    <div class="operation">
      <div v-if="status==1 || status==2">
        <a-button danger shape="round"
          :href="liveUrl"
          target="_blank"
          class="console-btn flex-row flex-center">
          {{ status==1 ? "进入直播间" : "看回放" }}
        </a-button>
      </div>
      <div v-else class="grey">直播预告</div>
    </div>
  </div>
</template>

<script>
import { formatLiveTime } from '@/utils';
import { base58Encode } from '@/utils/base58';

export default {
  name: 'LiveSmallCard',
  props: {
    liveId: String,
    liveImg: String,
    liveTitle: String,
    liveUrl: String,
    expertName: String,
    expertPic: String,
    startTime: String,
    viewNum: String,
    status: Number,
  },
  data () {
    return {
      isActive: false,
    }
  },
  methods: {
    handleHover(state) {
      this.isActive = state
    },
  },
  setup (props) {
    const getLiveUrl = () => {
      let data = {
        liveId: props.liveId,
        liveImg: props.liveImg,
        liveTitle: props.liveTitle,
        liveUrl: props.liveUrl,
        expertName: props.expertName,
        expertPic: props.expertPic,
        startTime: props.startTime,
        viewNum: props.viewNum,
        status: props.status,
      }
      return `/#/live/index?id=${base58Encode(JSON.stringify(data))}`;
    }
    return {
      formatLiveTime,
      getLiveUrl,
    }
  },
}
</script>

<style lang="less" scoped>
.live-small-card {
  width: 100%;
  height: 104px;
  background: @white;
  display: flex;
  padding: 27px 20px 27px 40px;

  &.active {
    background: @red-bg;
  }

  .flag {
    width: 12px;
    display: flex;
    align-items: center;
    .tag {
      width: 12px;
      height: 12px;
      background: @font-grey;
      border-radius: 6px;

      &.red {
        background: @font-red;
      }
    }
  }

  .time {
    width: 95px;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    font-weight: 400;
    color: @font-grey;
    margin-left: 12px;
  }

  .pic {
    width: 90px;
    height: 50px;
    border-radius: 8px;
    margin-left: 20px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }

  .info {
    flex: 1;
    width: 453px;
    padding: 3px 0;
    margin-left: 12px;
    display: flex;
    flex-direction: column;

    .name {
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      color: @font-black;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .expert {
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      font-weight: 500;
      color: @font-grey-light;
    }
  }

  .operation {
    width: 100px;
    height: 44px;
    line-height: 44px;
    margin-left: 26px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;

    .red {
      width: 100%;
      height: 32px;
      line-height: 30px;
      color: @font-red;
      margin: 6px 0;
      border-radius: 16px;
      border: 1px solid @font-red;
    }

    .grey {
      width: 100%;
      color: @font-grey-light;
    }
  }
}
</style>
